#{extends 'main.html' /}
#{set title:'Game on!' /}


<script language="JavaScript">
    //here you place the ids of every element you want.
    var ids = new Array('showanswerbutton', 'answer');

    function showAnswer(id) {
        hidediv('showanswerbutton');
        showdiv('answer')
        showdiv('evaluation')

    }


    function hidediv(id) {
        //safe function to hide an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'none';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'none';
            }
            else { // IE 4
                document.all.id.style.display = 'none';
            }
        }
    }

    function showdiv(id) {
        //safe function to show an element with a specified id

        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'block';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'block';
            }
            else { // IE 4
                document.all.id.style.display = 'block';
            }
        }
    }
</script>


        <h1>${game.name}</h1>

<div id="statistics">
    <img src="http://chart.apis.google.com/chart?chxr=0,0,${statistics.total}&chxt=x&chbh=a&chs=670x60&cht=bhs&chco=AA0033,008000,E5ECF9&chds=0,${statistics.total},0,${statistics.total},0,${statistics.total}&chd=t:${statistics.incorrect}|${statistics.correct}|${statistics.unaswered}" width="670" height="60" alt="Progress" />
</div>

<div id="items">



    <table border="0" width="100%">
        <tr>
            <td>
                <b>Question:</b>
            </td>
        </tr>
        <tr>
            <td>
                <textarea readonly="readonly" rows="10" cols="80">${currentEvaluation.card.question}</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <b>Answer:</b>
            </td>
        </tr>
        <tr>
            <td>
                <div id='answer' style="display:none;">
                    <textarea readonly="readonly" rows="10" cols="80">${currentEvaluation.card.answer}</textarea>
                </div>
                <div id='showanswerbutton'>
                    <a href="javascript:showAnswer();">SHOW ANSWER</a>
                </div>

            </td>
        </tr>
        <tr>
            <td>
                <div id='evaluation' style="display:none;">
                    Mark this card as: |
                    <a href="@{Games.markCurrentAsCorrect(game.id)}">CORRECT</a>
                    |
                    <a href="@{Games.markCurrentAsIncorrect(game.id)}">INCORRECT</a>
                </div>
            </td>
        </tr>
    </table>


</div>